import React,{Component} from 'react';
import {
  Modal,
  Drawer,
  Button,
  Form,
  Input,
  Select,
  Tag,
  Icon,
  List,
} from 'antd'

import { connect } from 'dva';

const namespace = 'book-select'
const { Option } = Select
const mapStateToProps = state => {
  debugger;
  const bookList = state[namespace].bookList;
  const value = state[namespace].value;
  const searchText = state[namespace].searchText;
  return {
    bookList,
    value,
    searchText,
    bookLoading: state.loading.effects[`${namespace}/queryList`],
  };
};

const mapDispatchToProps = dispatch => {
  return {
  };
};


@connect(
  mapStateToProps,
  mapDispatchToProps
)
class BookSelect extends Component {
  componentDidMount() {
    debugger;
    this.props.dispatch({
      type: `${namespace}/queryList`,
    });
  }

  SearchAll=()=>{
    const {dispatch} = this.props
    dispatch({
      type: `${namespace}/queryList`,
      payload:{searchText:''}
    })
    dispatch({
      type: `${namespace}/updateState`,
      payload:{searchText:''}
    })
  }
  SearchSK=()=>{
    const {dispatch} = this.props
    dispatch({
      type: `${namespace}/queryList`,
      payload:{searchText:'删库'}
    })
    dispatch({
      type: `${namespace}/updateState`,
      payload:{searchText:'删库'}
    })
  }

  SearchFQ=()=>{
    const {dispatch} = this.props
    dispatch({
      type: `${namespace}/queryList`,
      payload:{searchText:'放弃'}
    })
    dispatch({
      type: `${namespace}/updateState`,
      payload:{searchText:'放弃'}
    })
  }

  render(){
    debugger;
    const {dispatch} = this.props
    const {bookLoading} = this.props
    const selectProps = {
      style:{width:500},
      showSearch:true,
      filterOption:false,
      defaultActiveFirstOption:false,
      loading:bookLoading,
      showArrow:false,
      placeholder:"请选择书本",
      value:this.props.value,
      onSearch:(value)=>{
        debugger;
        dispatch({
          type: `${namespace}/queryList`,
          payload:{searchText:value}
        })
      },
      onChange:(value,opts)=>{
        dispatch({
          type: `${namespace}/updateState`,
          payload:{value:value}
        })
      }
    } 
    const children = this.props.bookList.map((value,index)=><Option value={value.url} key={value.url}>{value.name}</Option>)
    return (
      <div>
        <div>输入搜索字符串，返回搜索结果在下拉列表上</div>
        <div>current search text:{this.props.searchText}</div>
        <div>current select value:{this.props.value}</div>
        <Button onClick={()=>{this.SearchAll()}}>Search All</Button>
        <Button onClick={()=>{this.SearchSK()}}>Search 删库</Button>
        <Button onClick={()=>{this.SearchFQ()}}>Search 放弃</Button>
        <Select {...selectProps}>{children}</Select>
      </div>
    )
  }
}

export default connect(mapStateToProps)(BookSelect);